import { useGetAllNews } from '@/services/article';
import { NEWS_TYPE } from '@/services/constant/articles';
import { ProCard } from '@ant-design/pro-components';
import { history, styled } from '@umijs/max';
import { Menu, Space } from 'antd';
import Layout, { Content, Header } from 'antd/es/layout/layout';
import React, { useEffect, useState } from 'react';

const StyledCard = styled.div`
  display: flex;
  flex-wrap: wrap;
  .ant-pro-card-header {
    background-color: rgb(91, 216, 166);
    border-radius: 20px 20px 0 0;
  }
  .ant-pro-card-title {
    font-size: 40px;
    line-height: 50px;
  }
`;

const OverflowHiddenText = styled.div`
  width: 350px;
  text-indent: 2rem;
  overflow-wrap: break-word;
  min-height: 3rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
`;

const CoverImg = styled.img.attrs({
  alt: 'cover',
})`
  width: 350px;
`;

const tabsList = ['全部', ...NEWS_TYPE];

const News: React.FC = () => {
  const [current, setCurrent] = useState('全部');
  const { data: source } = useGetAllNews();
  const [showingData, setShowingData] = useState<API.IArticles[]>([]);

  useEffect(() => {
    if (source && source.code === 200)
      setShowingData(
        source.data.filter((x) =>
          current === '全部' ? true : x.tags?.includes(current),
        ),
      );
  }, [source, current]);

  return (
    <Layout>
      <Header style={{ backgroundColor: 'transparent' }}>
        <Menu
          onClick={(e) => setCurrent(e.key)}
          style={{ backgroundColor: 'transparent' }}
          selectedKeys={[current]}
          mode="horizontal"
          items={tabsList.map((e) => {
            return {
              key: e,
              label: e,
            };
          })}
        />
      </Header>
      <Content>
        <StyledCard>
          {showingData.map((item) => (
            <ProCard
              title={<OverflowHiddenText>{item.title}</OverflowHiddenText>}
              onClick={() => history.push(`/article?id=${item.id}`)}
              key={item.id}
              style={{ maxWidth: 400, margin: '20px', borderRadius: '20px' }}
            >
              <Space direction="vertical">
                <OverflowHiddenText>{item.introduction}</OverflowHiddenText>
                <CoverImg src={item.avatar}></CoverImg>
              </Space>
            </ProCard>
          ))}
        </StyledCard>
      </Content>
    </Layout>
  );
};

export default News;
